<template>
  <div class="vc-progress">
    <template v-if="props.textPosition === 'top' ">
      <div class="vc-progress-text__top" v-if="props.showText">
      <slot name="text" :percent="percent"></slot>
    </div>
    </template>
    <div :style="setBgStyle()">
      <svg width="100%" :height="props.height" :view-box="`0 0 ${Number(props.width)} ${Number(props.height)}`">
        <defs>
          <linearGradient
            :id="getGrid()"
            x1="0%"
            x2="0%"
            y1="100%"
            y2="0%"
            gradientUnits="userSpaceOnUse"
          >
            <stop offset="0%" :stop-color="bgColor[0]" stop-opacity="1" />
            <stop offset="100%" :stop-color="bgColor[1]" stop-opacity="1" />
          </linearGradient>
          <linearGradient
            :id="getGridItem()"
            x1="0%"
            x2="0%"
            y1="100%"
            y2="0%"
            gradientUnits="userSpaceOnUse"
          >
            <stop offset="0%" :stop-color="color[0]" stop-opacity="1" />
            <stop offset="100%" :stop-color="color[1]" stop-opacity="1" />
          </linearGradient>
        </defs>
        <line
          x1="0%"
          x2="0%"
          y2="0%"
          y1="100%"
          :stroke="`url(#${getGrid()})`"
          :stroke-dasharray="props.partGap"
          style="fill: none; stroke-width: 100%"
        />
        <line
          x1="0%"
          x2="0%"
          :y2="100 - percent + '%'"
          y1="100%"
          :stroke="`url(#${getGridItem()})`"
          :stroke-dasharray="props.partGap"
          style="fill: none; stroke-width: 100%"
        >
          <animate
            v-if="animate"
            attributeName="y2"
            attributeType="XML"
            :from="props.from || '100%'"
            :to="props.to || 100 - percent + '%'"
            :by="props.by"
            :begin="props.begin"
            :dur="props.dur"
            :repeatCount="props.repeatCount"
            :fill="props.fill"
            v-bind="{ ...props.animation }"
          ></animate>
        </line>
      </svg>
    </div>
    <template v-if="props.textPosition === 'bottom' ">
      <div class="vc-progress-text__bottom" v-if="props.showText">
        <slot name="text" :percent="percent"></slot>
      </div>
    </template>
  </div>
</template>
<script>
  export default {
    name: 'verGrid',
  };
</script>

<script setup>
  import {
    ref,
    watchEffect,
    watch,
    reactive,
    toRefs,
    defineProps,
    defineEmits,
    defineExpose,
    markRaw,
    computed,
    toRaw,
    onMounted,
  } from 'vue';
  import { isArray, isNumber } from '@/utils/config.js';
  import { setIndex, getIndex } from './setIndex.js';
  const props = defineProps({
    width: {
      type: [String, Number],
      default: 30,
    },
    height: {
      type: [String, Number],
      default: 80,
    },
    value: {
      type: [String, Number],
      default: 0,
    },
    // 最大值
    maxValue: {
      type: [String, Number],
      default: 100,
    },
    background: {
      type: [String, Array],
      default: '',
    },
    color: {
      type: [String, Array],
      default: '',
    },
    showText: {
      type: Boolean,
      default: false,
    },
    textPosition:{
      type:String,
      default:"bottom"
    },
    partGap: {
      type: Number,
      default: 5,
    },
    animate: {
      type: Boolean,
      default: false,
    },
    from: {
      type: String,
      default: '',
    },
    to: {
      type: String,
      default: '',
    },
    by: {
      type: String,
      default: '',
    },
    begin: {
      type: String,
      default: '0s',
    },
    dur: {
      type: String,
      default: '3s',
    },
    repeatCount: {
      type: String,
      default: '1',
    },
    fill: {
      type: String,
      default: 'freeze', //  动画结束停在终止状态 // remove  动画结束回到起始状态
    },
    animation: {
      type: Object,
      default: () => {},
    },
  });
  const setBgStyle = () => {
    let style = {};
    if (isNumber(props.width)) {
      style.width = props.width + 'px';
    } else {
      style.width = props.width;
    }
    if (isNumber(props.height)) {
      style.height = props.height + 'px';
      style.lineHeight = props.height + 'px';
    } else {
      style.height = props.height;
      style.lineHeight = props.height;
    }
    return style;
  };
  const percent = ((Number(props.value) / Number(props.maxValue)) * 100).toFixed(2) / 1;
  const bgColor = ref([]);
  const color = ref([]);
  if (props.background && isArray(props.background)) {
    bgColor.value = props.background;
  } else {
    bgColor.value = [props.background || 'rgba(0,0,0,0.3)', props.background || 'rgba(0,0,0,0.3)'];
  }
  if (props.color && isArray(props.color)) {
    color.value = props.color;
  } else {
    color.value = [props.color || '#1890ff', props.color || '#1890ff'];
  }
  setIndex();
  const getGrid = () => {
    return 'grid' + getIndex();
  };
  const getGridItem = () => {
    return 'gridItem' + getIndex();
  };
</script>

<style lang="less" scoped>
  .vc-progress {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    &-text {
      font-size: 12px;
      &__top{
        margin-top: 10px;
      }
      &__bottom{
        margin-top: 10px;
      }
    }
  }
</style>
